import { DrawerForm } from '@ant-design/pro-form';
import { Image, Modal, Spin, UploadFile } from 'antd';
import React, { useState } from 'react';
import { useAccess } from 'umi';

interface AddNewsPreviewProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  details: NewsData.PageResult[] | undefined;
  onSubmit: () => void;
}

const AddNewsPreview: React.FC<AddNewsPreviewProps> = ({
  open,
  onOpenChange,
  details,
  onSubmit,
}) => {
  const access = useAccess();

  // const [details, setDetailsState] = useState<CuesSubmitBo.AddActivePreview>();

  const [previewOpen, setPreviewOpen] = useState(false);
  const [previewImage, setPreviewImage] = useState('');
  const [previewTitle, setPreviewTitle] = useState('');
  const [isExpanded, setIsExpanded] = useState(false);
  const [imageUrls, setImageUrls] = useState();
  const [isModalOpen, setIsModalOpen] = useState(false);
  const handleCancel = () => setPreviewOpen(false);

  const handlePreview = async (file: UploadFile) => {
    setPreviewTitle(file.name);
    setPreviewImage(file.url);
    setPreviewOpen(true);
  };
  const showModal = () => {
    setIsModalOpen(true);
  };
  const showPreview = (url: string) => {
    console.log(url);
    setImageUrls(url);
    showModal();
    setIsExpanded(!isExpanded);
  };
  return (
    <DrawerForm
      key="drawer_form_add_submit_preview"
      title={details?.title}
      drawerProps={{
        // maskClosable: false,
        destroyOnClose: true,
      }}
      // trigger={
      //   <Button key="button_add_submit_preview" type="primary">
      //     <FileSearchOutlined /> 预览
      //   </Button>
      // }
      open={open}
      onOpenChange={(visible) => {
        onOpenChange(visible);
      }}
      submitter={{
        searchConfig: {
          submitText: '提交',
        },
        submitButtonProps: {
          style: {
            background: '#87d068',
          },
        },
      }}
      onFinish={async (values) => {
        let articleAttachments = [];

        // if (details?.articleAttachments !== undefined && details?.articleAttachments.length > 0) {
        //   articleAttachments = details?.articleAttachments
        //     .filter((item: { status: string }) => {
        //       return item.status === 'done';
        //     })
        //     .map((item: { response: { data: { id: any } } }) => {
        //       return item.response.data.id;
        //     });
        // }

        // const response = await saveCuesActive({
        //   articleName: details?.articleName,
        //   articleIndustryIds: details?.articleIndustrys?.map((item) => item.value),
        //   articleLabels: details?.articleLabels,
        //   remarks: details?.remarks,
        //   assignOrganizationIds: details?.assignOrganizationIds,
        //   articleContent: details?.articleContent,
        //   articleAttachments: articleAttachments,
        //   createdSource: details?.createdSource,
        // });

        // if (response.code === 0) {
        //   message.success('提交成功');
        //   onSubmit();
        //   return true;
        // } else {
        //   return false;
        // }
      }}
    >
      <Spin
        style={{
          textAlign: 'center',
        }}
        spinning={details?.length <= 0}
      >
        <div
          className="theme-blue"
          style={{ overflow: 'hidden', height: '100vh', overflowY: 'scroll' }}
        >
          <Modal open={isModalOpen} onCancel={handleCancel} closable footer={null}>
            <Image width={450} src={imageUrls} />
          </Modal>
          <head>
            <title>每日要闻推荐</title>
            <link rel="stylesheet" href="https://cdn.iappdaily.com/aibxs/css/app.css"></link>
          </head>
          {/* <link rel="stylesheet" type="text/css" href="https://cdn.iappdaily.com/aibxs/css/element-theme-blue.css"></link> */}
          {/* <body>
</body> */}
          <div data-server-rendered="true" id="__nuxt">
            <div id="__layout">
              <div className="index_page  pc-transition platform-web">
                <main>
                  <header className="navbar">
                    <h1 className="title">
                      <span aria-current="page" className="nuxt-link-exact-active nuxt-link-active">
                        每日新闻 - Daily News
                      </span>
                    </h1>
                    <div icon="person-outline" className="panel">
                      <div className="login-text"></div>
                    </div>
                  </header>
                  <div className="home view">
                    <div className="nya-container _gg" style={{ marginTop: '-12px' }}>
                      <span className="nya-container-subtitle"></span>
                      <div>
                        <img src="../../../../public/image/dailyNews.png" />
                      </div>
                    </div>
                    <div className="nya-container s11 pt" style={{ display: 'none' }}>
                      <div className="nya-title">
                        <i className="eva eva-gift-outline"></i>
                        <span>会员</span>
                      </div>
                      <span className="nya-container-subtitle"></span>
                      <a href="/account#pay" rel="noopener noreferrer">
                        <button type="button" className="el-button el-button--primary">
                          <span>立即解锁所有会员功能</span>
                        </button>
                      </a>
                      <div className="note">
                        成为会员解锁全部功能，独享 VIP 专属通道，无限畅聊创作。
                      </div>
                    </div>

                    <div className="nya-loading" style={{ margin: '2rem auto', display: 'none' }}>
                      <div className="nya-loading__div"></div>
                    </div>
                    {details?.map((value, index) => (
                      <div className="nya-container pt" key={index}>
                        <div className="nya-title" style={{ backgroundColor: '#249FFD' }}>
                          <i className="eva eva--outline"></i>
                          <span>{value.source}</span>
                        </div>
                        <span className="nya-container-subtitle"></span>
                        <span style={{ color: '#2F3E4C' }}>
                          {value.icon ? (
                            <img src={value.icon} />
                          ) : (
                            <div
                              className="tools-font-icon"
                              style={{ backgroundColor: `#${value.ico_color}` }}
                            >
                              <i className={`eva eva-${value.ico_name}`}></i>
                            </div>
                          )}
                          <div className="tools-card-text">
                            <div className="tools-card-name" style={{ fontSize: 'large' }}>
                              {value.title}
                            </div>
                            <div
                              className="tools-card-desc"
                              style={{ whiteSpace: 'normal', fontSize: 'medium' }}
                            >
                              {value.content}
                            </div>
                          </div>
                        </span>
                        <div style={{ textAlign: 'right' }}>
                          <a
                            onClick={() => showPreview(value.image)}
                            id="image"
                            style={{ color: '#249FFD' }}
                          >
                            查看版面位置
                          </a>
                          <a
                            href={value.url}
                            target="_blank"
                            style={{ marginLeft: 15, color: '#249FFD' }}
                          >
                            原文链接
                          </a>
                        </div>
                      </div>
                    ))}
                  </div>

                  <div className="tools-footer">
                    <div className="footer-version">
                      <div>
                        备案号:渝ICP备2021004499号-4<u> </u>
                        <div style={{ marginTop: '10px' }} rel="nofollow" target="_blank">
                          @2023 重庆市委宣传部
                        </div>
                      </div>
                    </div>
                  </div>
                </main>
              </div>
            </div>
          </div>
        </div>
      </Spin>
    </DrawerForm>
  );
};

export default AddNewsPreview;
